<template>
  <fieldset>
    <legend>评论列表</legend>
    <ul>
      <li v-for="item in commentlist" :key="item.id">
        <p>{{ item.content }}</p>
        <span>发布者：{{ item.name }}</span
        >&nbsp; <span>发布时间：{{ item.time }}</span
        >&nbsp;
        <button @click="del(item.id)">点击删除</button>
      </li>
    </ul>
    <Modal :visible="isShow" @on-confirm="confirm" @on-cancel="cancel">
      <h3 slot="tip">提示</h3>
      <h4 slot="body">您确定要删除吗？</h4>
    </Modal>
  </fieldset>
</template>
<script>
// import * as commentApi from "@/api";
import Modal from "../../modal";
import { mapActions, mapState } from "vuex";
import { delComment } from "@/api";
export default {
  components: {
    Modal,
  },
  data() {
    return {
      val: [],
      isShow: false,
      trueid: "",
    };
  },
  methods: {
    ...mapActions(["GET_COMMENT_LIST"]),
    confirm() {
      this.isShow = false;
      delComment(this.trueid).then((res) => {
        if (res.data.state) {
          this.GET_COMMENT_LIST();
        } else {
          alert("删除出错，该数据已不存在");
        }
      });
    },
    cancel() {
      this.isShow = false;
    },
    del(id) {
      this.trueid = id;
      this.isShow = true;
    },
  },
  computed: {
    ...mapState(["commentlist"]),
  },
  mounted() {
    this.GET_COMMENT_LIST();
  },
};
</script>
<style scoped>
ul {
  height: 500px;
  overflow-y: scroll;
  background-color: rgb(106, 241, 196);
}
</style>
